import { useState } from 'react'

type User = {
  name:string,
  age:number
}
function App() {
  // 1. 限制初始化值的类型
  // const [value,toggle] = useState(false)
  // const [list,setList] = useState([1,2,3])
  // const changeValue = ()=>{
  //   toggle(true)
  // }
  // 写法一
  // const [user,setUser] = useState<User>({
  //   name:'jack',
  //   age:18
  // })

  //函数的写法二
  // const [user,setUser] = useState<User>(()=>{
  //   return {
  //     name:'jack',
  //     age:18
  //   }
  // })
  // 如果没有初始值 const [user,setUser] = useState<User>()       =====  underfined
  // const changeUser = ()=>{
    // setUser({
    //   name:'john',
    //   age:28
    // })
    // 或者
    // setUser(()=>({
    //   name:'john',
    //   age:28
    // }))
    // 如果初始值没有填写 那么就写 underfined
    // setUser(underfined)
  // }


  //定义为null
  const [user,setUser] = useState<User | null>(null)
  const changeUser = ()=>{
    setUser(null)
    setUser({
      name:'jack',
      age:18
    })
  }
  // 为了类型安全 可选链做类型守卫
  // 只有user不为null (不为空值)的时候才进行点运算
  return <> this is app {user?.age}  <button onClick={changeUser}>点击</button> </>
}

export default App
